<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:o="http://openfaces.org/"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

	<style>
		.noMaskClass .rich-mpnl-mask-div {
			display:none;
		}
	</style>
	
	<script type="text/javascript">
		function clearControls() {
			#{rich:element('parcelToMergeId1')}.value = '';
			#{rich:element('parcelVisibleId1')}.value = '';
			#{rich:element('parcelName1')}.value = '';
			
			#{rich:element('parcelToMergeId2')}.value = '';
			#{rich:element('parcelVisibleId2')}.value = '';
			#{rich:element('parcelName2')}.value = '';
		}
		function clearMergeData() {
			var selectControl = null;
			for (var i = 0; i &lt; mapEditor.controls.length; i++)
				if (mapEditor.controls[i].id == 'parcelSelectControl') {
					selectControl = mapEditor.controls[i];
					break;
				}
			if (selectControl != null)
				selectControl.unselectAll();
			parcelFeaturesLayer.selectedFeatures.clear();
			clearControls();
		}
		function updateMergeControls() {
			var numSelected = parcelFeaturesLayer.selectedFeatures.size();
			if (numSelected == 0) {
				clearControls();
				return;
			}

			if (numSelected > 2) {
				var selectControl = null;
				for (var i = 0; i &lt; mapEditor.controls.length; i++) {
					if (mapEditor.controls[i].id == 'parcelSelectControl') {
						selectControl = mapEditor.controls[i];
						break;
					}
				}
				if (selectControl != null) {
					while (parcelFeaturesLayer.selectedFeatures.size() > 2)
						selectControl.unselect(parcelFeaturesLayer.selectedFeatures[0]);
				}
				numSelected = parcelFeaturesLayer.selectedFeatures.size(); 
			}

			if (numSelected > 0) {
				var parcel1 = parcelFeaturesLayer.selectedFeatures[0];
				#{rich:element('parcelToMergeId1')}.value = parcel1.fid;
				#{rich:element('parcelVisibleId1')}.value = parcel1.data.detailed_label;
				#{rich:element('parcelName1')}.value = parcel1.data.name;

				if (numSelected > 1) {
					var parcel2 = parcelFeaturesLayer.selectedFeatures[1]; 
					#{rich:element('parcelToMergeId2')}.value = parcel2.fid;
					#{rich:element('parcelVisibleId2')}.value = parcel2.data.detailed_label;
					#{rich:element('parcelName2')}.value = parcel2.data.name;
				}
				else {
					#{rich:element('parcelToMergeId2')}.value = '';
					#{rich:element('parcelVisibleId2')}.value = '';
					#{rich:element('parcelName2')}.value = '';
				}
			}
		}
		function selectedParcelToMerge(event) {
			updateMergeControls();
		}
		function pickParcelMode() {
			var selectControl = null;
			for (var i = 0; i &lt; mapEditor.controls.length; i++)
				if (mapEditor.controls[i].id == 'parcelSelectControl') {
					selectControl = mapEditor.controls[i];
					break;
				}
			if (selectControl != null)
				selectControl.activate();

			parcelFeaturesLayer.events.remove('featureselected');
			parcelFeaturesLayer.events.remove('featureunselected');
			parcelFeaturesLayer.events.register('featureselected', this, selectedParcelToMerge);
			parcelFeaturesLayer.events.register('featureunselected', this, selectedParcelToMerge);
		}
	</script>
	
	<rich:modalPanel id="mergePanelToolbox" minWidth="300" minHeight="370" resizeable="false" styleClass="noMaskClass" zindex="10000">
		<f:facet name="header">
			<h:outputText value="Fusion de Predio"/>
		</f:facet>
		
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/close.png" styleClass="hidelink"
					id="hideMergePanel" />
				<rich:componentControl for="mergePanelToolbox" attachTo="hideMergePanel"
					operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>
		
		<h:form id="mergeParcelPanel">
		</h:form>
		
		<rich:toolBar height="20" itemSeparator="grid">
			<rich:toolBarGroup location="left">
				<o:commandButton type="button" onclick="clearMergeData()">
					<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Borrar todo
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/delete-all-icon.png" />
				</o:commandButton>
			</rich:toolBarGroup>
			<rich:toolBarGroup location="right">
				<o:commandButton type="button" onclick="pickParcelMode()">
					<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
						<span style="white-space:nowrap">
							Seleccionar parcelas
						</span>
					</rich:toolTip>
					<h:graphicImage value="/img/cursor-icon.png" />
				</o:commandButton>
			</rich:toolBarGroup>
		</rich:toolBar>
		<br />
		<h:outputText value="Seleccione las parcelas a unir en el mapa. Mantenga la tecla SHIFT para seleccionar varios predios. Solo se pueden unir 2 a la vez." />
		<br />
		<br />
		<table align="center">
			<tr>
				<th valign="top">Parcela No. 1</th>
				<td>#{'   '}</td>
				<td>
					<h:outputText value="Identificador" />
					<br />
					<h:inputText id="parcelVisibleId1" readonly="true" value="" />
					<br />
					<h:outputText value="Nombre" />
					<br />
					<h:inputText id="parcelName1" readonly="true" value="" />
					<br />
					<br />
				</td>
			</tr>
			<tr>
				<th valign="top">Parcela No. 2</th>
				<td>#{'   '}</td>
				<td>
					<h:outputText value="Identificador" />
					<br />
					<h:inputText id="parcelVisibleId2" readonly="true" value=""/>
					<br />
					<h:outputText value="Nombre" />
					<br />
					<h:inputText id="parcelName2" readonly="true" value="" />
					<br />
					<br />
				</td>
			</tr>
		</table>
		
		<br />

		<h:form>
			<div align="center">
				<h:inputHidden id="parcelToMergeId1" value="#{dataEntryHelper.mergeHelper.parcelToMergeId1}" required="true" requiredMessage="No se ha especificado la parcela #1" />
				<h:inputHidden id="parcelToMergeId2" value="#{dataEntryHelper.mergeHelper.parcelToMergeId2}" required="true" requiredMessage="No se ha especificado la parcela #2" />
				<a4j:commandButton value="Aplicar cambios" action="#{dataEntryHelper.mergeHelper.applyMerge}"
						reRender="#{dataEntryHelper.reRenderList(true)}, drawParcelFunctions, requestedParcelList"
						process="parcelToMergeId1, parcelToMergeId2"
						oncomplete="if (#{facesContext.maximumSeverity==null}) {clearControls(); drawParcelsReRender();} else {#{rich:component('msgPanel')}.show();}">
				</a4j:commandButton>
			</div>
		</h:form>
	</rich:modalPanel>
	
</ui:component>

